<script>

//指示器
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
// 轮播图
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
// 轮播图css
import 'swiper/css';
import 'swiper/css/navigation';
//指示器css
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default {
  data() {
    return {
      modules:[Pagination]
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    Pagination
  }
}
</script>
<template>
  <div>
<!--    轮播图-->
    <swiper :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide>
        <img src="../assets/1.webp" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/2.webp" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/3.webp" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
<style scoped>
img{
 width: 100%;
  height: 300px;
}
</style>